<template>
    <div class="index">
        <div class="top-title">
            <p class="tc">首页</p>
        </div>

        <!-- 搜索框区域 -->
        <div class="search">
            <form action="">
                <img src="../../images/index/icon-search.png">
                <input type="search" autocomplete="off" placeholder="请输入关键词">
            </form>
        </div>

        <!-- 轮播图区域 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item >
                <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item >
                <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item >
                <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg" alt="">
            </mt-swipe-item>
        </mt-swipe>

        <!-- 打折促销 实物卡兑换 -->
        <div class="nav-img fx-spb">
            <router-link to="/discount">
                <img src="../../images/index/nav-discount.png">
            </router-link>
            <router-link to="/exchange">
                <img src="../../images/index/nav-exchange.png">
            </router-link>
        </div>

        <div class="content">
            <p class="title">
                <img src="../../images/index/hot-sale.png" alt="">
            </p>
            <div class="content-items">
                <a class="icon-reserve">
                    <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                    <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                    <p class="price">￥&nbsp;38</p>
                </a>
                <a>
                    <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                    <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                    <p class="price">￥&nbsp;38</p>
                </a>
                <a>
                    <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                    <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                    <p class="price">￥&nbsp;38</p>
                </a>
                <a>
                    <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                    <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                    <p class="price">￥&nbsp;38</p>
                </a>
                <a>
                    <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                    <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                    <p class="price">￥&nbsp;38</p>
                </a>
                <a>
                    <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                    <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                    <p class="price">￥&nbsp;38</p>
                </a>
                <a>
                    <img src="http://data.100126.com/uploads/members/201901/03103725uOaVb.jpg">
                    <p class="ell-2">【现货】长荡湖大闸蟹生鲜蟹类实物礼盒螃蟹公母对半全部活蟹哈哈哈</p>
                    <p class="price">￥&nbsp;38</p>
                </a>
            </div>
        </div>

        <nav class="nav-bar">
            <router-link class="nav-tab-item" to="/index">
                <img src="../../images/index/icon-index-active.png" class="icon-index">
                <span class="nav-tab-label" style="color:#39BFB3;">首页</span>
            </router-link>
            <router-link class="nav-tab-item" to="/classify">
                <img src="../../images/index/icon-classify.png" class="icon-classify">
                <span class="nav-tab-label">分类</span>
            </router-link>
            <router-link class="nav-tab-item" to="/cart">
                <img src="../../images/index/icon-cart.png" class="icon-cart">
                <span class="nav-tab-label">购物车</span>
            </router-link>
            <router-link class="nav-tab-item" to="/user">
                <img src="../../images/index/icon-my.png" class="icon-my">
                <span class="nav-tab-label">我的</span>
            </router-link>
        </nav>
    </div>
</template>

<script>
import 'mint-ui/lib/style.css'
export default {
    data() { 
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/index.css';
.index{
    .mint-swipe {
        height: 3.4rem;
    }
    .nav-img{
        height: 1.6rem;
        padding-top: 0.2rem;
        img{
            height: 1.56rem;
            width: 100%;
        }
    }
    .search{
        padding: 1.2rem 0.4rem 0.2rem;
        form{
            height: 0.8rem;
            position: relative;
            input{
                width: 100%;
                height: 100%;
                background-color: #ededed;
                border-radius: 0.4rem;
                padding-left: 0.6rem;
                position: absolute;
            }
            img{
                width: 0.28rem;
                height: 0.28rem;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0.2rem;
                z-index: 10;
            }
        }
        
    }
}    
</style>

